import React, { Component } from 'react'
import '../styles/lists.css'

import PropTypes from 'prop-types'

export default class Lists extends Component {

  static propTypes = {
    carts: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
      num:PropTypes.number
    }))
  }


  render() {
    let { carts } = this.props
    return (
      <ul>
        {
          carts.map((item, index) => (
            <li key={item.id}>
              <span>ID：{item.id}</span>
              <span>名称：{item.name}</span>
              <span>价格：{item.price}</span>
              <span>数量:
              <button onClick={this.incr.bind(this, index)}>+</button>
                {/* <button onClick={() => this.incr(index)}>+</button> */}
                {item.num}
                <button onClick={this.decr.bind(this, index)}>-</button>
              </span>
              <span>小计：{item.num * item.price}</span>
            </li>
          ))
        }
      </ul>
    )
  }

  incr(index) {
    // 调用父级中的props传入的函数方法
    this.props.handlerCartNum(index)
  }

  decr(index) {
    // 调用父级中的props传入的函数方法
    this.props.handlerCartNum(index, 'decr')
  }


}
